<template>
	<view class="page">
		<view class="inpt-unit">
			<view class="inpt-key">
				员工姓名
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入员工姓名" class="inpt" v-model="truename" />
			</view>	
		</view>
		<view class="inpt-unit" style="margin-bottom: 400rpx;">
			<view class="inpt-key">
				员工手机号
			</view>	
			<view class="inpt-val">
				<input type="number" placeholder="请输入员工手机号" class="inpt" v-model="mobile"/>
			</view>	
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					确认
				</view>
			</template>
		</submit-btn>
	</view>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const employeeHandle = defineComponent({
	components:{
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			truename:'',
			mobile:'',
			id:'',
		})
		// watchEffect(()=>{
		// })
		onLoad(e => {
			data.id = e.id;
			getInfo();
		});
		const getInfo = async ()=>{
			const res = await uni.$request('staff.info',{id: data.id});
			let info = res.data;
			Object.keys(info).forEach(i=>{
				if(data.hasOwnProperty(i)){
					data[i] = info[i]
				}
			})
		}

		
		
		const submitRef = ref();
		const submit= async ()=>{
			if(! uni.$tools.match( data.truename,'nonull','请输入员工姓名')){
			    return;
			}
			if(! uni.$tools.match( data.mobile,'mobile')){
			    return;
			}
			const sendData={
				mobile:data.mobile,
				truename:data.truename,
			}
			if(data.id){
				sendData.id = data.id;
			}
			const url = data.id ? 'staff.edit' : 'staff.add';
			let res = await uni.$request(url,sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		}
		return {
			...toRefs(data),
			submitRef,
			submit,
		};
	}
})
export default employeeHandle;
</script>


<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.page{
		padding-top: 30rpx;
		padding-bottom: 57rpx;
	}
	.inpt-unit{
		margin-bottom: 40rpx;
		padding: 0 30rpx;
		.inpt-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.inpt-val{
			border-bottom: 2rpx solid #eee;
			.inpt{
				font-size: 24rpx;
				color:#333;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
	.p-btn{
		margin: 0 auto;
		width: 670rpx;
		height: 84rpx;
		background: #256ae5;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		&.disabled{
			background-color: #eee;
		}
	}

</style>
